/**
 * 管理后台 - 首页 - 左侧边导航栏列表
 * Author: Zeon
 * Date: 2017/8/1
 * Created by Panxsoft.
 */
<style lang="less" rel="stylesheet/less" type="text/less">
.v-shrink-menu {
    border-color: transparent;
    .layout-logo-left{
        width: 90%;
        height: 30px;
        line-height: 30px;
        border-radius: 3px;
        margin: 15px auto;
        text-align: center;
        font-size: 25px;
        color: #fff;
        cursor: pointer;
        img {
            height: 100%;
            vertical-align: sub;
        }
    }

    .ivu-icon {
        color: hsla(0,0%,100%,.7);
        &:hover{
            color: #fff;
        }

    }

    .icon-btn {
        width: 75px;
        padding: 10px 0;
        margin-left: -8px;
    }


    .drop-menu {
        min-width: 200px;
        width: auto;
    }

    .ivu-dropdown {
        border: 0;
    }

    .remove-border {
        &:visited {
            border: 0;
        }
    }

    .row-background {
        background-color: #363e4f;
        .ivu-icon {
            color: #2d8cf0;
        }

    }

}
</style>
<template>
	<div class="v-shrink-menu">
		<div
			class="layout-logo-left"
		>
			<img
				src="https://gz.bcebos.com/beauty-mirror/advert/icon-1024_1562225165165.png"
				alt="">
		</div>
		<template v-for="( menu , index ) in getMenus">
			<div
				:class="getRowBackground(menu).class"
				:key="index"
				style="text-align: center;">
				<Dropdown
					v-if="menu.submenus"
					:key="index"
					transfer
					placement="right-start"
					@on-click="routeTo">
					<div
						class="icon-btn"
						type="text">
						<Icon
							:type="menu.icon"
							:size="iconSize"/>
					</div>
					<DropdownMenu
						slot="list"
						class="drop-menu">
						<template v-for="( submenu , index ) in menu.submenus">
							<DropdownItem
								:name="submenu.key"
								:key="index"><Icon :type="submenu.icon"/><span style="padding-left:10px;">{{ submenu.text }}</span></DropdownItem>
						</template>
					</DropdownMenu>
				</Dropdown>
				<Dropdown
					v-else
					:key="index"
					transfer
					placement="right-start"
					@on-click="routeTo">
					<div
						class="icon-btn"
						type="text"
						@click="routeTo(menu.key)">
						<Icon
							:type="menu.icon"
							:size="iconSize"/>
					</div>
					<DropdownMenu
						slot="list"
						class="drop-menu">
						<DropdownItem :name="menu.key" ><Icon :type="menu.icon"/><span style="padding-left:10px;">{{ menu.text }}</span></DropdownItem>
					</DropdownMenu>
				</Dropdown>
			</div>
		</template>
	</div>

</template>
<script>

import { mapGetters } from 'vuex';

export default {
	props: {
		spanLeft: {
			type: Number,
			required: true,
			default: 4,
		},

		beforePush: {
			type: Function,
			default() {
				return () => {};
			},
		},
	},

	data() {
		return {
			DEFAULT_BIG_SPAN: 4,
			is_accordion: true,
			permission_nodes: [],
			// 菜单配置
			// menus: adminMenus,

			is_selected: false,

		};
	},

	computed: {

		...mapGetters('menu', [
			'getMenus',
			'getSelectedMenu',
			'getOpenedMenu',
			'getMenuTitle',
		]),

		/**
		 * 返回图标大小
		 * @return {Number} {description}
		 */
		iconSize() {
			const big_size = 24;
			const small_size = 20;

			return this.spanLeft === this.DEFAULT_BIG_SPAN
				? small_size
				: big_size;
		},

		/**
         * 返回菜单数组
         * @return {array} {菜单数组}
         */
		sideMenus() {
			return this.adminMenus || [];
		},

	},

	methods: {

		/**
         * 路由跳转
		 * @param {String} path {跳转路径}
		 * @return {undefined}
         */
		routeTo(path) {
			this.$router.push({
				name: path,
			});
		},

		/**
		 * 获取菜单选中颜色
         * @param {Object} record {菜单对象}
         * @return {undefined}
         */
		getRowBackground(record) {
			const param = {

				class: '',

			};

			if (record.submenus) {
				for (let i = 0; i < record.submenus.length; i += 1) {
					if (String(this.getSelectedMenu) === String(record.submenus[i].name)) {
						param.class = 'row-background';
					}
				}
			} else if (String(this.getSelectedMenu) === String(record.name)) {
				param.class = 'row-background';
			}

			return param;
		},

	},
};
</script>
